<template>
    <div>
         <router-link  v-show="showAbs" tag="div" to="/"  class="header-abs" >
             <div class="iconfont header-abs-back">&#xe624;</div>
         </router-link>
         <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
            <router-link to="/">
            <div class="iconfont header-fixed-back">&#xe624;</div>
             </router-link>
             长隆野生动物世界</div>
    </div>
</template>

<script>
export default {
    name:'DetailHeader',
    data (){
        return {
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    methods:{
       handleScroll (){
           const top = document.documentElement.scrollTop 
           if(top > 60 ){
               let opacity = top / 140
               opacity = opacity > 1 ? 1:opacity
               this.opacityStyle = {
                   opacity
               }
               this.showAbs = false
           } else{
               this.showAbs = true
           }
       }
    },
    activated (){
        window.addEventListener('scroll',this.handleScroll)
    },
    // 页面替换成新的页面时触发
    deactivated (){
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>


<style  scoped>
.header-abs{
    position: absolute;
    left:20px;
    top:20px;
    width:30px;
    height:30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px;
    background:#808080;
}
.header-abs-back{
    color:#fff;
    font-size:14px;
    font-weight: bolder;
}

 .header-fixed{
     z-index:2;
     position:fixed;
     top:0;
     left:0;
     right:0;
     height:43px;
     line-height: 43px;
     text-align:center;
     overflow: hidden;
     color:#fff;
     background:#00bcd4;
 }
.header-fixed-back{
  font-size:20px;
  position:absolute;
  top:0px;
  left:0px;
  width:32px;
  color:#fff;
}
</style>
